<template>
  <div class="container">
    <MyNavHead>办理续租</MyNavHead>
    <div class="middle-area">
      <Content :listData="list" />
      <div class="inp-area">
        <input type="text" placeholder="姓名" />
        <input type="text" placeholder="手机号" />
        <input type="text" placeholder="居住房" />
        <input type="text" placeholder="付款方式" />
        <input type="text" placeholder="租赁方式" />
      </div>
      <!-- <input type="radio" :checked="checked" class="radio" /> -->
      <!-- <select class="pull" name="rent" @change="changeHandle">
        <option value="0">请选择</option>
        <option value="1">整租</option>
        <option value="2">月租</option>
      </select> -->
      <div class="btn">
        <button @click="submitHandle">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavHead from "../../components/MyNavHead";
import Content from "./Content";
import api from "../../api";
export default {
  name: "Relet",
  components: {
    MyNavHead,
    Content,
  },
  data() {
    return {
      list: [],
      checked: false,
      value1: 0,
      option1: [
        { text: "请选择", value: 0 },
        { text: "月租", value: 1 },
        { text: "年租", value: 2 },
      ],
    };
  },
  methods: {
    changeHandle() {
      this.checked = true;
    },
    submitHandle() {
      this.$toast.loading({
        message: "加载中",
      });
      var timer = setInterval(() => {
        this.$toast.success("登记成功");
        clearInterval(timer);
        this.date = "";
      }, 400);
    },
  },
  mounted() {
    api.getExitRent().then((res) => {
      //   console.log(res.data);
      this.list = res.data.list;
    });
  },
};
</script>
<style lang="less" scoped>
.container {
  background-color: #f1f1f1;
  width: 100%;
  .title {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    margin-top: 1.2rem;
    text-align: left;
    padding-left: 0.2rem;
    box-sizing: border-box;
    letter-spacing: 1px;
    font-size: 17px;
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
  }
  .middle-area {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1.4rem;
    padding: 0 0.2rem;
    .inp-area {
      margin-top: 0.2rem;
      position: relative;
      box-sizing: border-box;
      input {
        width: 100%;
        height: 1rem;
        padding-left: 0.2rem;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
        border-bottom: 1px solid #f1f1f1;
      }
      i {
        position: absolute;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.3);
      }
      .first {
        top: 0.3rem;
        right: 0.2rem;
      }
      .sencond {
        top: 1.3rem;
        right: 0.2rem;
      }
      .thrid {
        top: 2.3rem;
        right: 0.2rem;
      }
      .four {
        top: 3.3rem;
        right: 0.2rem;
      }
    }
    .btn button {
      width: 92%;
      height: 0.8rem;
      color: #fff;
      letter-spacing: 1px;
      border-radius: 3px;
      margin-top: 0.4rem;
      background: #ff5555;
    }
  }
}
</style>